<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:composite="http://java.sun.com/jsf/composite"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:a4j="http://richfaces.org/a4j"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:rich="http://richfaces.org/rich">
<composite:interface>
  <composite:attribute name="id" type="java.lang.String"
    shortDescription="id of component (java naming)" required="true"/>

  <composite:attribute name="actionBean" required="true"
    type="org.zanata.ui.ProgressBar"/>

  <composite:attribute name="title" type="java.lang.String"
    shortDescription="tooltip"/>

  <composite:attribute name="interval" type="java.lang.Integer"
    shortDescription="Interval (in ms) for call poll requests. Default value 1000 ms (1 sec)"
    default="1000"/>

  <composite:attribute name="render"
    shortDescription="Ids of component to render on pull request"/>

  <composite:attribute name="oncomplete" required="true"
    shortDescription="The client-side script method to be called after complete"/>

  <composite:attribute name="type"
    shortDescription="Type of statistic bar, 'large', 'full' or leave empty for default"
    default=""/>

</composite:interface>
<composite:implementation>

  <a4j:poll id="poll-#{cc.attrs.id}" interval="#{cc.attrs.interval}"
    enabled="#{cc.attrs.actionBean.inProgress}"
    limitRender="true" oncomplete="#{cc.attrs.id}OnPollComplete();"
    render="poll-#{cc.attrs.id}, #{cc.attrs.id}-var, #{cc.attrs.render}"/>

  <script type="text/javascript">
    //<![CDATA[
    function #{cc.attrs.id}OnPollComplete() {
      var contentDiv = jQuery("[id='#{rich:clientId(cc.attrs.id)}:#{cc.attrs.id}-content']");
      var completedPercentage = jQuery("[id='#{cc.attrs.id}-completePercent']").val();

      var completedBar = jQuery(contentDiv).find('.progress-bar__translated');
      jQuery(completedBar).width(getPercentage(completedPercentage));
      jQuery(completedBar).attr('title', getPercentage(completedPercentage));

      var uncompletedBar = jQuery(contentDiv).find('.progress-bar__item');
      jQuery(uncompletedBar).width(getPercentage((100 - completedPercentage)));
      jQuery(uncompletedBar).css('margin-left', getPercentage(completedPercentage));

      var inProgress = jQuery("[id='#{cc.attrs.id}-inProgress']").val();
      if (inProgress == 'false' || completedPercentage == '100') {
        #{cc.attrs.oncomplete};
      }
    }

    function getPercentage(val) {
      return val + '%';
    }
    //]]>
  </script>

  <h:panelGroup layout="block"  id="#{cc.attrs.id}" title="#{cc.attrs.title}">
    <h:panelGroup layout="block"  id="#{cc.attrs.id}-content"
      styleClass="is-active #{cc.attrs.type eq 'large' ? 'progress-bar--large__expander' : 'progress-bar__expander'}">

      <h:panelGroup layout="block"  id="#{cc.attrs.id}-var">
        <input id="#{cc.attrs.id}-inProgress" type="hidden"
          value="#{cc.attrs.actionBean.inProgress}"/>
        <input id="#{cc.attrs.id}-completePercent" type="hidden"
          value="#{cc.attrs.actionBean.completedPercentage}"/>
      </h:panelGroup>

      <ui:fragment rendered="#{cc.attrs.type eq 'large'}">
        <h:panelGroup layout="block"  styleClass="progress-bar progress-bar--large">
          <span class="progress-bar__translated" style="width: 0%;"/>
          <span class="progress-bar__item" style="width: 100%;margin-left: 0%"/>
        </h:panelGroup>
      </ui:fragment>

      <ui:fragment rendered="#{cc.attrs.type eq 'full'}">
        <h:panelGroup layout="block"  styleClass="progress-bar progress-bar--full">
          <span class="progress-bar__translated" style="width: 0%;"/>
          <span class="progress-bar__item" style="width: 100%;margin-left: 0%"/>
        </h:panelGroup>
      </ui:fragment>

      <ui:fragment rendered="#{cc.attrs.type eq ''}">
        <h:panelGroup layout="block"  styleClass="progress-bar">
          <span class="progress-bar__translated" style="width: 0%;"/>
          <span class="progress-bar__item" style="width: 100%;margin-left: 0%"/>
        </h:panelGroup>
      </ui:fragment>

    </h:panelGroup>
  </h:panelGroup>
</composite:implementation>
</html>
